<template>
    <div class="container">
        <el-form class="zw-el-form" ref="formRef" :rules="rules" :model="form" label-width="100px">
            <el-form-item label="企业名称" prop="merchantName">
                <el-input maxlength="50" placeholder="请输入企业名称" v-model.trim="form.merchantName"></el-input>
            </el-form-item>
            <el-form-item label="法人姓名" prop="corporateName">
                <el-input maxlength="20" placeholder="请输入法人姓名" v-model.trim="form.corporateName"></el-input>
            </el-form-item>
            <el-form-item label="企业代码" prop="regNo">
                <el-input
                    maxlength="20"
                    placeholder="请输入统一社会信用代码/组织机构代码/营业执照注册号"
                    v-model.trim="form.regNo"></el-input>
            </el-form-item>
            <el-form-item label="经营类目" prop="categoriesFirst">
                <Categories widthType="1" :cateList="form.cateList" @selectCategories="selectCategories"></Categories>
            </el-form-item>
        </el-form>
        <el-button class="btn" type="primary" @click="submitHandler">下一步</el-button>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import Categories from '../company/add/categories.vue';
import { getRegExp } from '@/commons/utils';
import store from '@/store';
import storage from '@/commons/storage';
import request from '@/request';

const useIdent = store.useIdentStore();
const emit = defineEmits(['submit']);
const formRef = ref(null);
const form = reactive({
    // 企业名称
    merchantName: '',
    // 法人姓名
    corporateName: '',
    // 企业代码
    regNo: '',
    // 经营类目
    cateList: [],
    // 联系人
    contactName: '',
    contactMobile: '',
    categoriesFirst: ''
});
let selectedCategories = reactive([]);
// 更新法人姓名
watch(
    () => useIdent.identRegInfo.corporateName,
    res => {
        form.corporateName = res;
    }
);

const rules = reactive({
    merchantName: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
    corporateName: [
        { required: true, message: '请输入法人姓名', trigger: 'blur' },
        {
            pattern: getRegExp('chinese'),
            message: '只能输入中文',
            trigger: 'blur'
        }
    ],
    regNo: [{ required: true, message: '请输入统一社会信用代码/组织机构代码/营业执照注册号', trigger: 'blur' }],
    categoriesFirst: [{ required: true, message: '请选择经营类目', trigger: 'blur' }]
});
// 经营类目
const selectCategories = arr => {
    if (arr.length === 0) {
        form.categoriesFirst = '';
    } else {
        selectedCategories.length = 0;
        arr.map(item => {
            selectedCategories.push(item);
        });
        form.categoriesFirst = 'complete';
        formRef.value.validateField('categoriesFirst');
    }
};
// 完成第一步
const submitHandler = () => {
    formRef.value.validate(valid => {
        if (valid) {
            emit('submit', {
                regNo: form.regNo,
                merchantName: form.merchantName,
                cateList: selectedCategories.map(item => {
                    return {
                        categoriesFirst: item.categoriesFirst,
                        categoriesSecond: item.categoriesSecond,
                        categoriesFirstName: item.categoriesFirstName,
                        categoriesSecondName: item.categoriesSecondName
                    };
                }),
                corporateName: form.corporateName,
                contactName: form.contactName,
                contactMobile: form.contactMobile
            });
        }
    });
};
// 反显数据
onMounted(async () => {
    if (useIdent.tenantInfo.merchantName) {
        init();
    } else {
        const { data } = await request('tenantInfo', {
            tenantId: storage.get('ZW-TENANT-ID')
        });
        useIdent.setTenantInfo(data);
        init();
    }
});
// init
const init = () => {
    form.merchantName = useIdent.tenantInfo.merchantName;
    form.regNo = useIdent.tenantInfo.regNo;
    form.cateList = useIdent.tenantInfo.cateList;
    form.contactName = useIdent.tenantInfo.contactName;
    form.contactMobile = useIdent.tenantInfo.contactMobile;
    useIdent.identRegInfo.corporateName && (form.corporateName = useIdent.identRegInfo.corporateName);
    selectCategories(
        form.cateList.map(item => {
            return {
                categoriesFirst: item.categoriesFirstCode,
                categoriesFirstName: item.categoriesFirstName,
                categoriesSecond: item.categoriesSecondCode,
                categoriesSecondName: item.categoriesSecondName
            };
        })
    );
};
</script>
<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    :deep(.el-input--large) {
        width: 440px;
    }
    :deep(.el-form-item--large) {
        margin-bottom: 24px;
    }
    .btn {
        width: 88px;
        margin-top: 30px;
    }
}
</style>
